<template>
  <d2-container class="cardaudit">
    <template slot="header">银行卡审核</template>
    <el-row :gutter="20">
      <el-col :span="3">
        <el-select size="small" v-model="auditval" placeholder="审核状态">
          <el-option
            v-for="item in auditlist"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="9">
        <el-date-picker
          style="width:100%;"
          size="small"
          v-model="timeval"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-col>
      <el-col :span="2">
        <el-button size="mini" type="primary" @click="onSearch">查询</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        label="序号"
        type="index"
        width="60">
      </el-table-column>
      <el-table-column
        prop="user"
        label="商户名"
        width="150">
      </el-table-column>
      <el-table-column
        prop="bankcard_number"
        label="银行卡账号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="bankcard_name"
        label="持卡人"
        width="100">
      </el-table-column>
      <el-table-column
        label="银行卡照片"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleLook(scope.row)" type="primary" size="mini" plain>查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="bankcard_money"
        label="充值金额"
        width="100">
      </el-table-column>
      <el-table-column
        prop="bankcard_time"
        label="消费时间"
        width="160">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="150">
        <template slot-scope="scope">
          <div v-if="scope.row.bankcard_status == 1">
            <el-button @click="onSure(scope.row)" type="primary" size="mini" plain>通过</el-button>
            <el-button @click="onRefused(scope.row)" type="danger" size="mini" plain>拒绝</el-button>
          </div>
          <el-button type="success" plain disabled v-if="scope.row.bankcard_status == 2">已通过</el-button>
          <el-button type="warning" plain disabled v-if="scope.row.bankcard_status == 3">已拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="total >= 20"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="20"
      layout="total, prev, pager, next"
      :total="total"
      style="text-align:right;margin:10px 0;">
    </el-pagination>
    <el-dialog
      title="身份证照片"
      :visible.sync="cardImgDialog"
      width="30%"
      center>
      <el-image :src="cardimg">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
    </el-dialog>
    <remote-js src="http://pv.sohu.com/cityjson?ie=utf-8"></remote-js>
  </d2-container>
</template>

<script>
import { cooperationbankcardlist, examinebankcard } from '@api/sys.login'
export default {
  name: 'cardaudit',
  data(){
    return{
      tableData:[],
      page:1,
      total:0,
      auditval:'',
      auditlist:[
        {
          value: 1,
          label: '未审核'
        },
        {
          value: 2,
          label: '已通过'
        },
        {
          value: 3,
          label: '已拒绝'
        }
      ],
      timeval:[],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      cardImgDialog:false,
      cardimg:'',
      ip:''
    }
  },
  components:{
    'remote-js': {
      render(createElement) {
        return createElement('script', { attrs: { type: 'text/javascript', src: this.src }});
      },
      props: {
        src: { type: String, required: true },
      },
    },
  },
  mounted(){
    let params = {
      page:this.page,
      pageSize:20
    }
    this.getUserList(params)
  },
  methods:{
    //获取IP
    getUserIP() {
      this.ip = returnCitySN["cip"]
      console.log('IP',this.ip)
    },
    handleCurrentChange(val) {
      this.page = val
      this.onSearch()
    },
    // 获取列表数据
    getUserList(params){
      cooperationbankcardlist(params)
        .then((res) => {
          console.log('银行卡数据',res)
          this.tableData = res.data
          this.total = res.count
        })
        .catch(() =>{
          this.tableData = []
          this.total = 0
        })
    },
    //查询
    onSearch(){
      if(this.timeval.length>0){
        let list = [...this.timeval]
        let index = list[1].indexOf(" ");
        list[1] = list[1].substring(0,list[1].length-index+1) + ' 23:59:59'
        this.timeval[1] = list[1]
      }
      let params = {
        page:this.page,
        pageSize:20,
        status:this.auditval,
        time:this.timeval
      }
      this.getUserList(params)
    },
    //查看
    handleLook(row){
      this.cardImgDialog = true
      this.cardimg = row.bankcard_img
    },
    // 通过
    onSure(row){
      this.getUserIP()
      examinebankcard({
        address:this.ip,
        bankcard_id:row.id
      })
        .then((res) => {
          this.page = 1
          this.onSearch()
        })
    },
    // 拒绝
    onRefused(row){

    }
  }
}
</script>

<style lang="scss">
.cardaudit{
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>

